<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
 <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="content">
	<div class="con-top"></div>
	<div class="con-bot"></div>
	<div class="fly-cart">
		<div class="wrapper">
			<span><i class="shopping-cart"></i></span>
			<div class="clear"></div>
			<div class="items">
				<div class="item fly-item1">
					<div class="item-img">
						<img src="images/item2.jpg" alt="item" />
					</div>
					<h3>Unique Color Wedges </h3>
					<h6>Nemo enim ipsam voluptatem quia voluptassit aspernatur aut odit aut fugit, sed quia.</h6>
					<p>Price : <span>$29</span></p>
					<button class="add-to-cart" type="button">Add to cart</button>
					<div class="clear"></div>
				</div>
				<div class="item fly-item2">
					<div class="item-img">
						<img src="images/item1.jpg" alt="item" />
					</div>
					<h3>Hansx Women Wedges</h3>
					<h6>Nemo enim ipsam voluptatem quia voluptassit aspernatur aut odit aut fugit, sed quia.</h6>
					<p>Price : <span>$29</span></p>
					<button class="add-to-cart" type="button">Add to cart</button>
					<div class="clear"></div>
				</div>
				<div class="item fly-item3">
					<div class="item-img">
						<img src="images/item3.jpg" alt="item" />
					</div>
					<h3>Niremo Beige Wedges</h3>
					<h6>Nemo enim ipsam voluptatem quia voluptassit aspernatur aut odit aut fugit, sed quia.</h6>
					<p>Price : <span>$29</span></p>
					<button class="add-to-cart" type="button">Add to cart</button>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
    $('.add-to-cart').on('click', function () {
        var cart = $('.shopping-cart');
        var imgtodrag = $(this).parent('.item').find("img").eq(0);
        if (imgtodrag) {
            var imgclone = imgtodrag.clone()
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({
                'opacity': '0.5',
                    'position': 'absolute',
                    'height': '150px',
                    'width': '150px',
                    'z-index': '100'
            })
                .appendTo($('body'))
                .animate({
                'top': cart.offset().top + 10,
                    'left': cart.offset().left + 10,
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInOutExpo');
            
            imgclone.animate({
                'width': 0,
                    'height': 0
            }, function () {
                $(this).detach()
            });
        }
    });
</script>

</body>
</html>
